'use client';

import { useState } from 'react';
import { useApp } from '@/contexts/AppContext';
import { useToast } from '@/components/Toast';
import { products, categories } from '@/lib/mockData';

export default function HomePage() {
  const { dispatch } = useApp();
  const { showToast, ToastContainer } = useToast();
  const [addingToCart, setAddingToCart] = useState<string | null>(null);
  const [buyingNow, setBuyingNow] = useState<string | null>(null);

  const handleAddToCart = async (product: any) => {
    const productId = product.id;
    setAddingToCart(productId);
    dispatch({ type: 'ADD_TO_CART', payload: product });
    
    setTimeout(() => {
      setAddingToCart(null);
      showToast(`已将 ${product.name} 加入购物车！`, 'success');
    }, 500);
  };

  const handleBuyNow = async (product: any) => {
    const productId = product.id;
    setBuyingNow(productId);
    
    // 模拟加载
    setTimeout(() => {
      setBuyingNow(null);
      // 直接跳转到订单页面
      window.location.href = `/order?product=${product.id}`;
    }, 500);
  };

  return (
    <div className="min-h-screen bg-white">
      {/* 英雄区域 */}
      <section className="bg-gradient-to-br from-yellow-100 via-white to-orange-100 py-20">
        <div className="max-w-6xl mx-auto px-4 text-center">
          <div className="bg-yellow-500 text-black px-4 py-2 rounded-full inline-block mb-6 text-sm font-medium">
            环保 × 惊喜 × 循环
          </div>
          
          <h1 className="text-5xl lg:text-6xl font-bold text-gray-800 mb-6">
            一箱<span className="text-yellow-500">未知</span>
            <br />
            十倍<span className="text-orange-500">惊喜</span>
          </h1>
          
          <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
            把城市角落里没人认领的包裹重新扔进盲盒机，
            <span className="text-gray-800 font-semibold">让每一次开箱都像在荒野里捡到宝</span>
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="/shop" className="bg-gradient-to-r from-yellow-400 to-orange-400 text-black font-bold py-4 px-8 rounded-lg text-lg hover:shadow-lg transition-shadow text-center">
              🎁 立即开箱
            </a>
            <a href="/about" className="border-2 border-yellow-500 text-yellow-600 font-bold py-4 px-8 rounded-lg text-lg hover:bg-yellow-50 transition-colors text-center">
              了解更多
            </a>
          </div>
        </div>
      </section>

      {/* 盲盒分类展示 */}
      <section className="py-20 bg-white">
        <div className="max-w-6xl mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-800 mb-4">
              四大盲盒分类
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              从虚拟物品到实体好物，从数码配件到二次元周边，满足你的各种需求
            </p>
          </div>

          {/* 产品分类展示 */}
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
            {categories.map((category) => {
              const categoryProducts = products.filter(p => p.category === category.id);
              const representativeProduct = categoryProducts[0];
              
              return (
                <div key={category.id} className="bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow overflow-hidden">
                  <div className={`h-48 bg-gradient-to-br ${representativeProduct?.bgColor || 'from-gray-400 to-gray-600'} flex items-center justify-center`}>
                    <div className="w-24 h-24 bg-white/20 rounded-lg flex items-center justify-center shadow-xl backdrop-blur-sm">
                      <span className="text-4xl">{category.icon}</span>
                    </div>
                  </div>
                  <div className="p-4">
                    <div className="flex items-center justify-between mb-2">
                      <span className="bg-gray-600 text-white px-2 py-1 rounded text-xs font-bold">
                        {category.name.replace('盲盒', '')}
                      </span>
                      <div className="text-sm text-gray-600">
                        {categoryProducts.length}款盲盒
                      </div>
                    </div>
                    <h3 className="font-semibold text-lg text-gray-900 mb-2">
                      {category.name}
                    </h3>
                    <p className="text-sm text-gray-600 mb-4">
                      {category.description}
                    </p>
                    <div className="space-y-3">
                      <a href={`/category/${category.id}`} className="w-full block bg-gray-50 text-gray-700 py-3 px-4 rounded-lg text-center hover:bg-gray-100 transition-colors font-medium border border-gray-200">
                        🔍 查看全部
                      </a>
                      <div className="text-center">
                        <span className="text-sm text-gray-500">
                          从￥{Math.min(...categoryProducts.map(p => p.price))} 起
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          {/* 热门产品展示 */}
          <div className="text-center mb-8">
            <h3 className="text-2xl font-bold text-gray-800 mb-4">热门产品</h3>
            <p className="text-gray-600">精选一些受欢迎的盲盒产品</p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {products.slice(0, 8).map((product) => (
              <div key={product.id} className="bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow overflow-hidden">
                <div className={`h-48 bg-gradient-to-br ${product.bgColor} flex items-center justify-center`}>
                  <div className="w-24 h-24 bg-white/20 rounded-lg flex items-center justify-center shadow-xl backdrop-blur-sm">
                    <span className="text-3xl">
                      {categories.find(c => c.id === product.category)?.icon || '📦'}
                    </span>
                  </div>
                </div>
                <div className="p-4">
                  <div className="flex items-center justify-between mb-2">
                    <span className="bg-gray-600 text-white px-2 py-1 rounded text-xs font-bold">
                      {categories.find(c => c.id === product.category)?.name.replace('盲盒', '') || '盲盒'}
                    </span>
                    <div className="text-2xl font-bold text-gray-800">
                      ￥{product.price}
                    </div>
                  </div>
                  <h3 className="font-semibold text-lg text-gray-900 mb-2">
                    {product.name}
                  </h3>
                  <p className="text-sm text-gray-600 mb-4">
                    {product.description}
                  </p>
                  <div className="space-y-3">
                    <a href={`/product/${product.id}`} className="w-full block bg-gray-50 text-gray-700 py-3 px-4 rounded-lg text-center hover:bg-gray-100 transition-colors font-medium border border-gray-200">
                      🔍 查看详情
                    </a>
                    <div className="grid grid-cols-2 gap-2">
                      <button
                        onClick={() => handleAddToCart(product)}
                        disabled={addingToCart === product.id}
                        className="border-2 border-orange-500 text-orange-600 font-medium py-2.5 px-3 rounded-lg hover:bg-orange-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm"
                      >
                        {addingToCart === product.id ? '添加中...' : '🛒 加入购物车'}
                      </button>
                      <button
                        onClick={() => handleBuyNow(product)}
                        disabled={buyingNow === product.id}
                        className="bg-gradient-to-r from-yellow-400 to-orange-400 text-black font-bold py-2.5 px-3 rounded-lg hover:shadow-lg transition-shadow disabled:opacity-50 disabled:cursor-not-allowed text-sm"
                      >
                        {buyingNow === product.id ? '处理中...' : '⚡ 立即购买'}
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA区域 */}
      <section className="py-20 bg-gradient-to-br from-yellow-400 to-orange-400">
        <div className="max-w-6xl mx-auto px-4 text-center">
          <h2 className="text-4xl font-bold text-black mb-6">
            准备好开启惊喜之旅了吗？
          </h2>
          <p className="text-xl text-black/80 mb-8 max-w-2xl mx-auto">
            加入箱野社区，与千万用户一起分享开箱的快乐，为环保贡献一份力量
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="/shop" className="bg-gray-800 text-white font-bold py-4 px-8 rounded-lg text-lg hover:bg-gray-700 transition-colors text-center">
              🎁 立即开箱
            </a>
            <a href="/about" className="bg-white/20 border-2 border-black text-black font-bold py-4 px-8 rounded-lg text-lg hover:bg-white/30 transition-colors text-center">
              💡 了解环保理念
            </a>
          </div>
        </div>
      </section>
      <ToastContainer />
    </div>
  )
}